<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点灯谜题</title>
<link rel="stylesheet" href="hover_01.css">
<style>
#chess {
	width: 500px;
	height: 500px;
	padding: 0px;
	margin: auto;
	font-size: 0px;
}
#message {
	width: 700px;
	height: 100px;
	border: 1px solid grey;
	box-sizing: border-box;
	margin: auto;
	overflow-y: auto;
}
.block {
	width: 100px;
	height: 100px;
	border: 2px solid grey;
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	padding: 0;
	background-color: #A193FF;
}
.Text {
	margin-left: 10px;
	display: inline-block;
	color: #656565
}
</style>
</head>

<body>
<div id="chess">
  <div class="block" onclick="active(0,0)"></div>
  <div class="block" onclick="active(0,1)"></div>
  <div class="block" onclick="active(0,2)"></div>
  <div class="block" onclick="active(0,3)"></div>
  <div class="block" onclick="active(0,4)"></div>
  <div class="block" onclick="active(1,0)"></div>
  <div class="block" onclick="active(1,1)"></div>
  <div class="block" onclick="active(1,2)"></div>
  <div class="block" onclick="active(1,3)"></div>
  <div class="block" onclick="active(1,4)"></div>
  <div class="block" onclick="active(2,0)"></div>
  <div class="block" onclick="active(2,1)"></div>
  <div class="block" onclick="active(2,2)"></div>
  <div class="block" onclick="active(2,3)"></div>
  <div class="block" onclick="active(2,4)"></div>
  <div class="block" onclick="active(3,0)"></div>
  <div class="block" onclick="active(3,1)"></div>
  <div class="block" onclick="active(3,2)"></div>
  <div class="block" onclick="active(3,3)"></div>
  <div class="block" onclick="active(3,4)"></div>
  <div class="block" onclick="active(4,0)"></div>
  <div class="block" onclick="active(4,1)"></div>
  <div class="block" onclick="active(4,2)"></div>
  <div class="block" onclick="active(4,3)"></div>
  <div class="block" onclick="active(4,4)"></div>
</div>
<div style="height: auto;width: auto;text-align: center;"> <a href="javascript:void(0);" onClick="init()" class="button border-fade">&nbsp;&nbsp;&nbsp;重新开始&nbsp;&nbsp;&nbsp;</a> </div>
<div id="message"></div>
</body>
<script>
	var TalkBar = document.getElementById("message");
	var _chessDiv = document.getElementsByClassName("block");
	var chessDiv = new Array();
	var chess = new Array();
	var clickSum = 0;
	var successFlag = false;
	var isGame = true;
	var flag_02 = false;
	function addP(x,y){
		TalkBar.innerHTML += "<span class = 'Text'>" + "(" + x + "," + y + ")" + "</span>";
		TalkBar.scrollTop = TalkBar.scrollHeight;
	}
	function init() {
		flag_02 = false
		successFlag = false;
		clickSum = 0;
		for (var i = 0; i < 5; i++) {
			chess[i] = new Array();
			for (var j = 0; j < 5; j++) {
				chess[i][j] = 0;
			}
		}
		var flag = 0;
		for (var i = 0; i < 5; i++) {
			chessDiv[i] = new Array();
			for (var j = 0; j < 5; j++) {
				chessDiv[i][j] = _chessDiv[flag];
				chessDiv[i][j].style.backgroundColor = "#A193FF";
				flag++;
			}
		}
		if(!isGame){
			clear();
			TalkBar.innerHTML += "<span class = 'Text'>初始化成功!</span>";
			console.log("***初始化***");
		}else{
			isGame = false;
		}
	}

	function code(x, y) {
		chessDiv[x][y].style.backgroundColor = (chess[x][y] == 0) ? "#FF00C6" : "#A193FF";
		chess[x][y] = 1 - chess[x][y];
	}
	
	function clear() {
		var node = document.getElementById("message");
		while (node.hasChildNodes()) {
    		node.removeChild(node.lastChild);
		}　　　
	}

	function cons() {
		console.log("");
		console.log("");
		console.log("");
		for (var i = 0; i < 5; i++) {
			console.log(chess[i]);
		}
	}
	
	function check() {
		for (var i = 0; i < 5; i++) {
			for (var j = 0; j < 5; j++) {
				if (chess[i][j] == 0) {
					return false;
				}
			}
		}
		return true;
	}

	function active(row, col) {
		if(!flag_02){
			flag_02 = true;
			clear();
		}
		if (successFlag == false) {
			clickSum++;
			//alert(row + "," + col + ":" + chess[row][col]);
			code(row, col);
			if ((row == 0 || row == 4 || col == 0 || col == 4)) {
				if (row == 0 && col == 0) {
					code(row + 1, col);
					code(row, col + 1);
				} else if (row == 0 && col == 4) {
					code(row + 1, col);
					code(row, col - 1);
				} else if (row == 4 && col == 0) {
					code(row - 1, col);
					code(row, col + 1);
				} else if (row == 4 && col == 4) {
					code(row - 1, col);
					code(row, col - 1);
				} else if (row == 0) {
					code(row + 1, col);
					code(row, col + 1);
					code(row, col - 1);
				} else if (row == 4) {
					code(row - 1, col);
					code(row, col + 1);
					code(row, col - 1);
				} else if (col == 0) {
					code(row + 1, col);
					code(row - 1, col);
					code(row, col + 1);
				} else if (col == 4) {
					code(row + 1, col);
					code(row - 1, col);
					code(row, col - 1);
				}
			} else {
				code(row + 1, col);
				code(row - 1, col);
				code(row, col + 1);
				code(row, col - 1);
			}
			cons();
			if (check() && successFlag == false) {
				console.log("success!!");
				alert("恭喜，您完成了游戏，共点击" + clickSum + "次！");
				successFlag = true;
			}else{
				addP(row + 1,col + 1);
			}
		}
	}
	init();
</script>
</html>
